#{extends '/template/main.html' /}
<!-- Removing search and results count filter -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">会员充值详情</h3>
    </div>
    <div class="panel-body">
        <button class="btn btn-turquoise" id="searchBtn">当前可用金额</button>

        <table class="table table-bordered table-striped" id="example-2">
            <tbody class="middle-align">
            <thead>
                <tr>
                    <th>金额类型</th>
                    <th>金额</th>
                </tr>
            </thead>
            #{list webUserAccountList,as:'account'}
            <tr>
                <td>&{'GoodsType.' + account.goodsType}</td>
                <td>${account?.amount}</td>
            </tr>
            #{/list}
            </tbody>
        </table>


        <div id="main" style="width: 600px;height:40px;"></div>
        <button class="btn btn-turquoise" id="searchBtn">充值记录</button>
        <table class="table table-bordered table-striped" id="example-2">
            <thead>
            <tr>
                <th>充值金额</th>
                <th>赠送金额</th>
                <th>描述</th>
                <th>充值时间</th>
            </tr>
            </thead>

            <tbody class="middle-align">
            #{list historyList,as:'history'}
            <tr>
                <td>${history?.amount}</td>
                <td>${history?.giveAmount}</td>
                <td>${history?.content}</td>
                <td>${history?.createAt?.format('yyyy-MM-dd')}</td>
            </tr>
            #{/list}
            </tbody>
        </table>
    </div>
</div>

<!-- Imported styles on this page -->
<link rel="stylesheet" href="/public/js/datatables/dataTables.bootstrap.css">

<script src="/public/js/datatables/js/jquery.dataTables.min.js"></script>

<!-- Imported scripts on this page -->
<script src="/public/js/datatables/dataTables.bootstrap.js"></script>
<script src="/public/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script src="/public/js/datatables/tabletools/dataTables.tableTools.min.js"></script>

<script type="text/javascript" src="/public/laypage/laypage.js"></script>
<script type="text/javascript" src="/public/js/echarts/echarts.js"></script>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var array = new Array();
    var dataArr = new Array();

    #{list orderList,as:'order'}
    var name = "&{'GoodsType.' + order?.goods_type}";
    var num = parseInt("${order?.num}");

    array.push(name);

    var item = {};
    item.value = num;
    item.name = name;

    dataArr.push(item);
    #{/list}

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: array
        },
        series : [
            {
                name: '订单来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:dataArr,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    $(document).ready(function(){
        $(document).on("click", "#searchBtn", function(){
            $("#searchForm").attr("action", "/BS0024/admin/report/source/index");
            $('#searchForm').submit();
        })
    });
</script>
